<template>
  <div>
    <header class="login" v-if="this.$store.state.user">
      <div class="userinfo">
        <span>
          <van-image round width="2rem" height="2rem" :src="userInfo.photo" />
          <span>{{userInfo.name}}</span>
        </span>
        <van-button round size="mini" @click="$router.push({name:'profile',query:{id:123}})">编辑资料</van-button>
      </div>
      <ul class="list">
        <li>
          <span>{{userInfo.art_count}}</span>
          <span>头条</span>
        </li>
        <li>
          <span>{{userInfo.follow_count}}</span>
          <span>关注</span>
        </li>
        <li>
          <span>{{userInfo.fans_count}}</span>
          <span>粉丝</span>
        </li>
        <li>
          <span>{{userInfo.like_count}}</span>
          <span>获赞</span>
        </li>
      </ul>
    </header>
    <header class="nologin" v-else>
      <van-image round width="2rem" height="2rem" src="../../assets/mobile.png" />
      <p class="loginReg">
        <span class="login" @click="login">登陆</span>
        <span>/</span>
        <span>注册</span>
      </p>
    </header>
    <div class="contet">
      <ul>
        <li>
          <i class="toutiao iconshoucang" style="color:#ef7373;font-size: 26px;"></i>
          <span>我的收藏</span>
        </li>
        <li>
          <i class="toutiao iconlishi" style="color:#ffa836;font-size: 26px;"></i>
          <span>浏览历史</span>
        </li>
        <li>
          <i class="toutiao iconzuopin" style="color:#60a4f9;font-size: 26px;"></i>
          <span>作品</span>
        </li>
      </ul>
      <div class="notice">
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">消息通知</span>
          </template>
        </van-cell>
        <van-cell is-link>
          <!-- 使用 title 插槽来自定义标题 -->
          <template #title>
            <span class="custom-title">小智同学</span>
          </template>
        </van-cell>
      </div>
      <van-button
        type="default"
        block
        v-if="this.$store.state.user"
        @click="logout"
        style="margin-top:10px;color:#dc7070"
      >退出登录</van-button>
    </div>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { userinfo_api } from "@/api/user.js";
import { SET_TOKEN } from "@/utils/storage.js";
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  created() {
    this.getUserInfo();
  },
  methods: {
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      this.$toast(item.name);
    },
    login() {
      this.$router.push("/login");
    },
    // 退出登录
    logout() {
      Dialog.confirm({
        message: "确认退出吗",
      })
        .then(() => {
          // SET_TOKEN("SET_TOKEN", null);
          this.$store.commit("SET_TOKEN", null);
        })
        .catch(() => {});
    },
    // 获取用户信息
    async getUserInfo() {
      try {
        const res = await userinfo_api();
        console.log(res);
        if (res.status === 200) {
          // this.$toast.success("获取用户信息成功");
          this.userInfo = res.data.data;
          SET_TOKEN("userId", res.data.data.id);
        }
      } catch (err) {
        if (err.response.status === 401) {
          this.$toast.fail("用户认证失败");
        } else {
          this.$toast.fail("获取用户信息失败");
        }
      }
    },
  },
};
</script>

<style lang="less">
.nologin {
  height: 360px;
  background: url("../../assets/banner.png");
  background-size: cover;
  text-align: center;
  color: #fff;
  .van-image {
    margin-top: 100px;
  }
  p {
    margin-top: 5px;
    font-size: 28px;
  }
}
.login {
  overflow: hidden;
  height: 360px;
  background: url("../../assets/banner.png");
  background-size: cover;
  padding: 0 30px;
  .userinfo {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    font-size: 30px;
    color: #fff;
    .van-image {
      vertical-align: middle;
      margin-right: 20px;
    }
    .van-button {
      margin-top: 45px;
    }
  }
  .list {
    height: 60px;
    line-height: 60px;
    display: flex;
    margin-top: 20px;
    li {
      display: flex;
      flex-direction: column;
      flex: 1;
      color: #fff;
      font-size: 30px;
      text-align: center;
    }
  }
}
.contet {
  height: 1000px;
  background-color: #f5f7f9;
  ul {
    margin-bottom: 5px;
    height: 200px;
    display: flex;
    background-color: #fff;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      flex: 1;
      // text-align: center;
      span {
        margin-top: 5px;
        font-size: 28px;
      }
    }
  }
}
.content {
  padding: 16px 16px 160px;
}
</style>
